<template>
  <div class="login">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="80px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名:" prop="username">
        <el-input v-model="ruleForm.username" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码:" prop="password">
        <el-input
          v-model="ruleForm.password"
          type="password"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item class="btn">
        <el-button type="primary" class="btn1" @click="submitForm(ruleFormRef)"
          >Submit</el-button
        >
        <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from "vue";
import { login } from "../request/api";
import type { FormInstance } from "element-plus";
import { ElMessage } from "element-plus";
export default defineComponent({
  setup() {
    const ruleFormRef = ref<FormInstance>();

    // 提交表单
    const submitForm = (formEl: FormInstance | undefined) => {
      if (!formEl) return;
      formEl.validate(async (valid) => {
        // console.log(valid);

        if (valid) {
          //   发送请求
          let { data: data } = await login(ruleForm);
          console.log(data.data);
          if (data.data.success == true) {
            window.localStorage.setItem("token", data.data.token);
            ElMessage({
              message: "登陆成功",
              type: "success",
            });
          } else {
            ElMessage({
              message: "登陆失败",
              type: "error",
            });
          }
        }
      });
    };

    // 重置表单
    const resetForm = (formEl: FormInstance | undefined) => {
      if (!formEl) return;
      formEl.resetFields();
    };

    interface ruleForm {
      username: string;
      password: string;
    }
    const ruleForm: ruleForm = reactive({
      username: "admin",
      password: "123456",
    });

    // 校验规则
    const rules = reactive({
      username: [
        {
          required: true,
          message: "请输入用户名",
          trigger: "blur",
        },
        { min: 3, max: 10, message: "长度为3-10个字符", trigger: "blur" },
      ],
      password: [
        {
          required: true,
          message: "请输入密码",
          trigger: "blur",
        },
        { min: 3, max: 10, message: "长度为3-10个字符", trigger: "blur" },
      ],
    });

    return { ruleForm, rules, ruleFormRef, submitForm, resetForm };
  },
});
</script>

<style scoped lang="scss">
.login {
  height: 100%;
  width: 100%;
  background: url(../assets/333.jpg);
  display: flex;
  justify-content: center;
  align-items: center;
}

.demo-ruleForm {
  width: 600px;
  height: 400px;
  background-color: #eee;
  border-radius: 20px;
  padding: 0 40px;
  padding-left: 30px;
  .el-form-item {
    margin: 60px auto;
    :deep(.el-form-item__label) {
      font-size: 16px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      //   width: 40px;
    }
    .el-form-item__content {
      .el-input {
        height: 50px;
        font-size: 18px;
      }
    }
    .el-button {
      width: 43%;
      height: 40px;
    }
    :deep(.btn1) {
      margin-right: 55px;
    }
  }
}
</style>